<template>
	<view>
		
		 <courseHeader :course='course'></courseHeader>
		 
		 <!-- 试看窗口 -->
		<view  v-if="videoUrl" class="video-box mask" @click="closePlay" @touchmove.stop.prevent="()=>{}">
			<view class="name">
				<text>免费试看</text>
				<text class="iconfont icon-close"></text>
			</view>
			<!-- h5端播放是有问题 -->
			<video id="playVideo" class="video" :src="videoUrl"></video>
		</view>
				
		 <view  class="course-details" :style="'height:' + pageHeight + 'px'">
			
		 	<tabBar :tabs='tabs' v-model="tabIndex"></tabBar>
			<swiper class="swiper-box" :duration="300" :current="tabIndex" circular @change='changeTab'>
				<swiper-item v-for="(item,index) in tabs" :key='index'>
					<scroll-view  class="scroll-box" :scroll-y="enableScroll"
					@scrolltoupper="scrolltoupper" :upper-threshold="0"
					>
						<view class='details-info'>
							<courseInfo v-if="index === 0" :detailUrls="course.detailUrls"></courseInfo>
							<courseDir v-if="index === 1" :chapterList='chapterList' :isBuy='isBuy' @ @playVideo="playVideo" :activeObj='activeObj'></courseDir>
							<courseComment v-if="index === 2" :commentList='commentList'></courseComment>
							<courseGroup v-if="index === 3" :groupList='groupList'></courseGroup>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			
		 </view>
		 
		 <!-- pay buttom -->
		 <bottomPay :btnText="isBuy || course.isFree ? '立即观看': '立即购买'" @clickBottom="clickBottom"></bottomPay>
	</view>
</template>

<script>
	import courseHeader from "./components/course-header.vue"
	import tabBar from "@/components/common/tab-bar.vue"
	import tabs from "@/config/course-details-tabs.js"
	
	import courseInfo from "./components/course-info.vue"
	import courseDir from "./components/course-dir.vue"
	import courseComment from "./components/course-comment.vue"
	import courseGroup from "./components/course-group.vue"
	
	import bottomPay from "./components/bottomPay.vue"
	
	import api from "@/api/course.js"
	
	export default{
		components:{courseHeader,tabBar,courseInfo,courseDir,courseComment,courseGroup,bottomPay},
		data(){
			return{
				 tabs,/// tabs:tabs 详情页下面的标签选项卡数据
				 tabIndex:0,//当前所在选项下标
				 pageHeight: 3000, // 手机的视口高度
				 statusNavHeight: 0, // 状态栏+导航栏高度
				 enableScroll: false, //详情区域是否允许纵向滚动，false不允许
				 detailTop: 0, //详情区域距离顶部距离
				 
				id:null,//课程id
				course: {}, // 课程基本信息
				chapterList: [], //章节信息
				commentList: [], //评论信息
				groupList: [], //套餐信息
				isBuy: false, // 是否购买，默认未购买 ////////后面改回false
				
				videoUrl: null, // 播放视频地址
				videoContext: null, // 播放器实例
				activeObj: {}, // 当前点击的第几节下标
			}
		},
		onLoad(option) {
				console.log(option.id)
				this.id = option.id
				this.loadData()
				
				this.getPageHeight()
		},
		// 监听页面滚动到底部
		onReachBottom() {
			console.log('监听页面滚动到底部 enableScroll')
			//页面到达底部，开启详情区域滚动
			this.enableScroll = true
		},
		// 第1次页面渲染完后触发
		onReady() {
			// 获取详情区域距离顶部高度（标签卡距离顶部区域
			let view = uni.createSelectorQuery().in(this).select(".course-details");
			view.fields({
			  rect: true
			}, data => {
			  // console.log("节点的顶部高度为" + data.top);
			  this.detailTop = data.top
			}).exec();
			
			//获取当前播放实例
			this.videoContext = uni.createVideoContext('playVideo', this)
		},
		// 监听页面滚动
		onPageScroll(e) {
			console.log('监听页面滚动', e, this.detailTop)
			// console.log(this.detailTop - this.statusNavHeight)
			if(this.detailTop - this.statusNavHeight <= e.scrollTop) {
				// 页面到达底部则将详情区域滚动条开启
				this.enableScroll = true
				return
			}
			
			
			// 当前滚动条距离顶部距离 小于 详情区域到达顶部高度
			if(this.enableScroll && e.scrollTop < this.detailTop) {
				// 禁用详情滚动
				this.enableScroll = false
			}
			
		},
		// 小程序端分享（onLoad)
		onShareAppMessage(res) {
			return {
			  title: this.course.title,
			  path: this.$util.routePath()//哪个页面分享
			}
		},
		methods:{
			// 左右切换
			changeTab(e) {
				this.tabIndex = e.detail.current
				
				// 页面回到底部
				// uni.pageScrollTo({
				// 	scrollTop: this.detailTop,
				// 	duration: 300
				// })
			},
			// 获取当前页面视口高度
			getPageHeight() {
				const res = uni.getSystemInfoSync()
				// 平台
				const system = res.platform
				// 状态栏高度
				const statusBarHeight = res.statusBarHeight
				if(system === 'android') {
					// 状态导航高度
					this.statusNavHeight = statusBarHeight + 48
				}else if(system === 'ios'){
					this.statusNavHeight = statusBarHeight + 44
				}
				// console.log(res.screenHeight , res.windowHeight)
				this.pageHeight = res.screenHeight - this.statusNavHeight
			},
			// scrollView组件滚动到顶部
			scrolltoupper() {
				// 1. 让页面滚动条回到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 150
				})
				// 2. 禁用详情scrollView滚动
				// this.enableScroll = false
			},
			
			loadData() {
				// 0. 判断是否已购买
				this.getCourseIsBuy()
				// 1. 查询课程基本信息
				this.getCourseById()
				// 2. 查询章节列表
				this.getChapterSectionList()
				// 3. 查询评论列表
				this.getCourseCommentList()
				// 4. 查询组合套餐列表
				this.getCourseGroupList()
			},
			async getCourseIsBuy() {
				//未登录不用跳转登录页
				const isLogin = this.$util.isLogin({nav: false}) 
				if(isLogin) {
					// 如果已登录，则判断是否已购买
					const {data} = await api.getCourseIsBuy(this.id)
					this.isBuy = data.isBuy
					console.log('isBuy', this.isBuy)
				}
			},
			//1. 查询课程基本信息
			async getCourseById() {
				const {data} = await api.getCourseById(this.id)
				console.log('查询课程基本信息',data)
				this.course = data
			},
			// 2. 查询章节列表
			async getChapterSectionList() {
				const {data} = await api.getChapterSectionList(this.id)
				console.log('查询章节列表', data)
				this.chapterList = data
			},
			
			// 3. 查询评论列表
			async getCourseCommentList() {
				const {data} = await api.getCourseCommentList(this.id)
				console.log('查询评论列表', data)
				this.commentList = data
			},
			
			// 4. 查询组合套餐列表
			async getCourseGroupList() {
				const {data} = await api.getCourseGroupList(this.id)
				console.log('查询组合套餐列表', data)
				this.groupList = data
			},
			// 点击底部按钮触发
			clickBottom() {
				// console.log('点击购买')
				if(this.isBuy || this.course.isFree) {
					// 已购买过或免费，跳转视频播放页面
					this.navTo(`/pages/course/course-play?id=${this.id}`,{login:true})
				}else {
					// 未购买过，跳转确认购买页
					this.navTo(`/pages/order/confirm-buy?course=` + encodeURIComponent(JSON.stringify(this.course)),{login:true} )
				}
			},
			
			// 关闭播放窗口
			closePlay() {
				this.videoContext.stop()
				this.videoUrl = null
			},
			// 试看视频
			playVideo(obj) {
				console.log( obj.section )
				if(this.isBuy) {
					// 已经购买，则直接跳转到视频播放列表页面
					this.navTo(`/pages/course/course-play?id=${this.id}`, {login: true})
					return
				}
				//解决小程序高亮显示问题
				this.activeObj = obj.activeObj
				// // 弹出播放窗口
				this.videoUrl = obj.section.videoUrl
				this.$nextTick(() => {
					// 播放
					this.videoContext.play()
				})
			},
		}
	}
</script>

<style lang="scss">
	.course-details {
		overflow: hidden;
		.swiper-box, .scroll-box {
			height: 100%;
		}
		.details-info {
			// 被隐藏的80rpx（标签选项卡高度）
			padding-bottom: 180rpx;
		}
	}
	.video-box {
			z-index: 100;
			text-align: center;
			.name{
				color: #FFFFFF;
				position: relative;
				top: 380rpx;
				/* #ifdef MP */
				top: 300rpx;
				/* #endif */
				font-size: 38rpx;
				font-weight: bold;
			}
			.icon-close{
				margin-left: 20rpx;
			}
			.video {
				width: 750rpx;
				height: 420rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			
		}
</style>
